<div>
  <p-dataScroller [value]="cars" [rows]="10" [buffer]="0.9" [inline]="true" [scrollHeight]="scrollHeight">
    <p-header>
      Scroll Down to to Load More
    </p-header>
    <ng-template let-car pTemplate="item">
      <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5;">
        <div class="ui-grid-row">
          <div class="ui-grid-col-3" style="text-align:center">
            <i class="fa fa-eye" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"></i>
            <img src="assets/showcase/images/demo/car/{{car.brand}}.png">
          </div>
          <div class="ui-grid-col-9">
            <div class="ui-grid ui-grid-responsive ui-fluid">
              <div class="ui-grid-row">
                <div class="ui-grid-col-2">Vin: </div>
                <div class="ui-grid-col-10">{{car.vin}}</div>
              </div>
              <div class="ui-grid-row">
                <div class="ui-grid-col-2">Year: </div>
                <div class="ui-grid-col-10">{{car.year}}</div>
              </div>
              <div class="ui-grid-row">
                <div class="ui-grid-col-2">Brand: </div>
                <div class="ui-grid-col-10">{{car.brand}}</div>
              </div>
              <div class="ui-grid-row">
                <div class="ui-grid-col-2">Color: </div>
                <div class="ui-grid-col-10">{{car.color}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
  </p-dataScroller>

  <p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true"
    showEffect="fade" [showHeader]="true" [dismissableMask]="true" [modal]="true" width="225"
    (onAfterHide)="onDialogHide()">
    <div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="selectedCar" style="font-size:16px;text-align:center;padding:20px">
      <div class="ui-grid-row">
        <div class="ui-grid-col-12" style="text-align:center">
          <img src="assets/showcase/images/demo/car/{{selectedCar.brand}}.png">
        </div>
      </div>
      <div class="ui-grid-row">
        <div class="ui-grid-col-4">Vin: </div>
        <div class="ui-grid-col-8">{{selectedCar.vin}}</div>
      </div>
      <div class="ui-grid-row">
        <div class="ui-grid-col-4">Year: </div>
        <div class="ui-grid-col-8">{{selectedCar.year}}</div>
      </div>
      <div class="ui-grid-row">
        <div class="ui-grid-col-4">Brand: </div>
        <div class="ui-grid-col-8">{{selectedCar.brand}}</div>
      </div>
      <div class="ui-grid-row">
        <div class="ui-grid-col-4">Color: </div>
        <div class="ui-grid-col-8">{{selectedCar.color}}</div>
      </div>
    </div>
  </p-dialog>
</div>
